<template>
  <el-table
    :data="tableData"
    header-row-class-name="table-header-gray"
    border
    height="calc(100vh - 3.55rem)"
    @selection-change="handleSelectionChange"
    style="width: 100%"
    v-bind="$attrs"
  >
    <el-table-column
      v-for="(item, index) in colConfig"
      :key="index"
      :type="item.type || ''"
      :label="item.label || ''"
      :width="item.width || ''"
      :prop="item.prop"
      :align="item.align || 'left'"
      :sortable="item.sortable || false"
      :show-overflow-tooltip="item.showOverflowTooltip || true"
    >
      <template v-if="item?.slotHeader === true" #header>
        <div class="table-header">
          <span class="label-name">{{ item.label }}</span>
          <div class="icon-view">
            <el-popover
              placement="bottom"
              :width="250"
              trigger="click"
              @hide="handelHide"
              @show="handelShow(item.prop,index)"
              :show-after="100"
            >
              <template #reference>
                <i
                  @click.stop="iconChange(item.prop, index)"
                  :class="[
                    'iconfont',
                    'icon-icon-screening',
                    iconActive === item.prop ? 'icon-active' : '',
                  ]"
                ></i>
              </template>
              <div class="screen-view">
                <!-- {{ item.slotHeaderType }} -->
                <BiFuzzySearch
                  v-if="item.slotHeaderType === 'fuzzy-search'"
                  :oneColumnList="oneColumnList"
                  @handelQuery="handelQuery"
                  @handelSearch="handelSearch"
                ></BiFuzzySearch>
                <BiCheckbox
                  v-else-if="item.slotHeaderType === 'checkbox'"
                  :checkboxList="item.checkboxList"
                  :checkboxLabel="item.checkboxLabel"
                  :checkboxValue="item.checkboxValue"
                  @handelCheckDefine="handelCheckDefine"
                  @handelChackCancel="handelChackCancel"
                ></BiCheckbox>
                <BiSelect
                  :selectList="item.selectList"
                  :selectKey="item.selectKey"
                  :selectName="item.label"
                  @handelSelect="handelSelect"
                  v-else-if="item.slotHeaderType === 'select'"
                ></BiSelect>
                <slot v-else></slot>
              </div>
            </el-popover>
          </div>
        </div>
      </template>
      <template #default="scope" v-if="item?.slot === true">
        <slot :name="item.prop" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from "vue";
import BiFuzzySearch from "@/components/bi-fuzzy-search/index";
import BiCheckbox from "./checkbox.vue";
import BiSelect from "./select.vue";
const props = defineProps({
  tableData: {
    type: Array,
    required: false,
    default: () => {
      return [];
    },
  },
  colConfig: {
    type: Array,
    required: false,
    default: () => {
      return [];
    },
  },
  oneColumnList: {
    type: Array,
    required: false,
    default: () => {
      return [];
    },
  },
});
const kays = ref("");
const iconActive = ref("");
const handelHide = () => {
  iconActive.value = "";
};
const iconChange = (prop, index) => {
  iconActive.value = prop;
  emit("handelIconChange", prop, index);
};
const emit = defineEmits([
  "handleSelectionChange",
  "handelHeaderQuery",
  "handelHeaderShow",
  "handelHeaderSearch",
  "handelIconChange",
  'handelHeaderSelect'
]);
const handleSelectionChange = (val) => {
  emit("handleSelectionChange", val);
};
const handelQuery = (value) => {
  emit("handelHeaderQuery", kays, value);
};
const handelShow = (prop,index) => {
  kays.value = prop;
  emit("handelHeaderShow", prop,index);
};
const handelSearch = (val) => {
  emit("handelHeaderSearch", kays, val);
};
const handelSelect = (item) => {
  emit("handelHeaderSelect", kays,item);
};
const handelCheckDefine = (val) => {
  console.log(val);
};
const handelChackCancel = () => {
  console.log("quxiao");
};
</script>
<style lang="scss">
@import '@/assets/styles/index.scss';
.table-header-gray {
  // @include tableHeader;
  .table-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label-name {
    }
    .icon-view {
      display: flex;
      align-items: center;
      color: #4e5969;
      font-weight: 500;
      i {
        font-size: 0.14rem;
        margin-bottom: -0.01rem;
      }
      .icon-active {
        color: #165dff;
      }
    }
    .screen-view {
      height: 2.95rem;
      width: 2.5rem;
      box-sizing: border-box;
      background: #ffffff;
      border: 0.5px solid #dcdcdc;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
